<template>
	<view class="parking-place parking-detail">

		<view class="park-top" :style="'height:'+headHeight+'px;'">
			<u-navbar :autoBack="true" :bgColor="bgColor">
			</u-navbar>
		</view>
		<scroll-view :scroll-top="scrollTop" @scroll="scroll" scroll-y="true" class="scroll-Y">
			<view class="park-cont">
				<mapBox class="map" :latitude="latitude" :longitude="longitude" :markers="markers" />
				<view class="tabcont">
					<view class="laybox flex-col flex-c">
						<view class="lay-tit lay-tit2 flex-cc">
							<view class="bar"></view>
						</view>
						<view class="lay-cont">
							<view class="list">

								<view class="li">
									<view class="item">
										<view class="near" v-if="false">距离最近</view>
										<view class="row1">{{ parkInfo.stationName }}</view>
										<view class="row2 flex-cb">
											<view class="left">
												<view class="dd flex-ac">
													<view class="icon">
														<image :src="imageUrl +'parking/icon_park.png'" mode="widthFix">
														</image>
													</view>
													<view class="info flex-ac">
														<view class="txt1">
															充电停车场
															<text v-if="false">|</text>
														</view>
														<view class="tag tag1" v-if="false">{{ parkInfo.tcText }}
														</view>
														<view class="tag tag1" v-if="false">
															<image :src="imageUrl +'parking/icon_fp1.png'" mode="widthFix"></image>
															支持发票
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="row3 flex-cb">
											<view class="zt">
												<text :class="parkInfo.statusClass">{{ parkInfo.statusText }}</text>
											</view>
											<view class="per flex">
												<view class="txt1">
													<text :class="parkInfo.statusClass">{{ parkInfo.equipmentAvailableNum }}</text>
												</view>
												<view class="txt2">/ {{ parkInfo.equipmentTotalNum }} </view>
											</view>
											<view class="step flex-ac">
												<view class="jd" :class="parkInfo.statusClass" :style="{ width: parkInfo.progressWidth }"></view>
											</view>
										</view>
										<view class="row4">
											<image :src="imageUrl +'parking/bg_dz.png'" mode="widthFix" class="bg">
											</image>
											<view class="txt flex-cb">
												<view class="left flex-a flex-b">
													<view class="col1">
														<image :src="imageUrl +'parking/icon_map.png'" mode="widthFix">
														</image>
													</view>
													<view class="col2 flex-a">{{ parkInfo.address }}</view>
												</view>
												<view class="col3">
													<view class="go">
														<image :src="imageUrl +'parking/icon_go.png'" mode="widthFix">
														</image>
													</view>
													<view class="km">{{ parkInfo.parkToUserDistance }}km</view>
												</view>
											</view>
										</view>
										<view class="row5">
											<image :src="imageUrl +'parking/pic1.jpg'" mode="widthFix"></image>
										</view>
									</view>
								</view>

								<view class="li li2">
									<view class="item">
										<view class="item-tit flex-ac">
											<image :src="imageUrl +'parking/icon_money.png'" mode="widthFix"></image>
											<text>收费标准</text>

										</view>
										<view class="item-cont">
											{{ parkInfo.electricFee }}<br>
											{{ parkInfo.serviceFee }}
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="null2"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="park-bot">
			<view class="group flex-cb">
				<view class="fl">
					<button @click="callPhone" v-if="false">
						<image :src="imageUrl +'parking/icon_tel.png'" mode="widthFix"></image>
						<view class="txt">拨打服务</view>
					</button>
				</view>
				<view class="fr flex-ac">
					<button class="btn1 flex-cc" @click="daohang">
						<image :src="imageUrl +'parking/icon_send.png'" mode="widthFix"></image>
						<view class="txt">导航</view>
					</button>
					<button class="btn2" v-if="false">
						立即包月
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import mapBox from '@/components/map.vue';
	export default {
		components: {
			mapBox
		},
		data() {
			return {
				latitude: 0,
				longitude: 0,
				markers: [],
				headHeight: 0,
				navBarHeight: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				bgColor: 'transparent',
				parkInfo: {},
			}
		},
		onLoad(options) {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			// console.log('状态栏高度:', statusBarHeight);
			// console.log('胶囊按钮信息:', menuButtonInfo);
			// console.log('导航栏高度:', navBarHeight);
			// console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight + 20
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20

			console.log("打印parkItem：", decodeURIComponent(options.parkItem));
			this.parkInfo = JSON.parse(decodeURIComponent(options.parkItem));
			this.latitude = this.parkInfo.latitude;
			this.longitude = this.parkInfo.longitude;
			let iconPath = this.imageUrl + "parking/chongdian" + this.parkInfo.statusClass + ".png";

			this.markers = [{
				id: this.parkInfo.id,
				latitude: this.parkInfo.latitude,
				longitude: this.parkInfo.longitude,
				iconPath: iconPath,
				width: 50,
				height: 50
			}];
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.parkInfo.tel //仅为示例
				});
			},
			statusClass() {
				// 可以在这里添加更复杂的逻辑
				return this.parkInfo.status;
				// 或者返回一个对象/数组
				// return { [this.parkInfo.status]: true, 'some-other-class': this.someCondition };
			},
			daohang() {
				uni.openLocation({
				  latitude: this.parkInfo.latitude,
				  longitude: this.parkInfo.longitude,
				  name: this.parkInfo.name,
				  address: this.parkInfo.address,
				  scale: 15,
				  success: () => {
				    console.log('成功打开地图');
				  },
				  fail: (err) => {
				    console.error('打开地图失败：', err);
				  }
				});
			},
		}
	}
</script>
<style>
	page {
		overflow: hidden;
		height: 100vh;
	}
</style>
<style lang="scss" scoped>
	@import '@/static/css/parking.scss'
</style>